<template>
  <div class="edu-page-warp">
    <el-card
      v-if="user.userType == '1'"
      shadow="never"
      body-style="padding: 24px; margin-bottom: -14px;">
      <div class="edu-detail-title">
        <img
          class="student-logo"
          src="/static/images/icon_pohto_male.png"
          alt=""><span>{{ user.name }}</span>
        <div class="float-right">
          <span class="text-light-gray">申请编号：</span>{{ rollInfo.no }}
        </div>
      </div>
      <el-row
        :gutter="20"
        class="edu-info-list">
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">工号：</label>
            <span class="majoy-tex span">{{ user.code }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">姓名：</label>
            <span class="majoy-text span">{{ user.name }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">性别：</label>
            <span class="majoy-text span">{{ user.sex }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">国籍：</label>
            <span class="majoy-text span">{{ user.country }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">职称：</label>
            <span class="majoy-text span">{{ user.profession }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">教师类型：</label>
            <span class="majoy-text span">{{ user.title }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">联系方式：</label>
            <span class="majoy-text span">{{ user.phone }}</span>
          </div>
        </el-col>
        <!-- <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">授课资格：</label>
            <span class="majoy-text span">{{ user.condition }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">授课开始时间：</label>
            <span class="majoy-text span">{{ user.startDate | formatDate }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">授课结束时间：</label>
            <span class="majoy-text span">{{ user.endDate | formatDate }}</span>
          </div>
        </el-col> -->
      </el-row>
    </el-card>
    <el-card
      v-if="user.userType == '2'"
      shadow="never"
      body-style="padding: 24px; margin-bottom: -14px;">
      <div class="edu-detail-title">
        <img
          class="student-logo"
          src="/static/images/icon_pohto_male.png"
          alt=""><span>{{ user.name }}</span>
        <div class="float-right">
          <span class="text-light-gray">申请编号：</span>{{ rollInfo.no }}
        </div>
      </div>
      <el-row
        :gutter="20"
        class="edu-info-list">
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">学号：</label>
            <span class="majoy-tex span">{{ user.studentId }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">性别：</label>
            <span class="majoy-text span">{{ rollInfo.sex }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">年级：</label>
            <span class="majoy-text span">{{ user.grade }}级</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">培养层次：</label>
            <span class="majoy-text span">{{ user.trainingLevel }}</span>
          </div>
        </el-col>
        <template v-if="user.trainingLevel == '本科'">
          <el-col :span="6">
            <div class="item-group">
              <label class="secondary-text label">学院：</label>
              <span class="majoy-text span">{{ user.faculty }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item-group">
              <label class="secondary-text label">专业：</label>
              <span class="majoy-text span">{{ user.profession }}</span>
            </div>
          </el-col>
        </template>
        <!-- <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">导师：</label>
            <span class="majoy-text span">{{ user.teacherName }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">申请时间：</label>
            <span class="majoy-text span">{{ rollInfo.time | formatDate }}</span>
          </div>
        </el-col> -->
      </el-row>
    </el-card>
    <el-card
      v-if="user.userType == '3'"
      shadow="never"
      body-style="padding: 24px; margin-bottom: -14px;">
      <div class="edu-detail-title">
        <img
          class="student-logo"
          src="/static/images/icon_pohto_male.png"
          alt=""><span>{{ user.userName }}</span>
        <div class="float-right">
          <span class="text-light-gray">申请编号：</span>{{ rollInfo.no }}
        </div>
      </div>
      <el-row
        :gutter="20"
        class="edu-info-list">
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">账号：</label>
            <span class="majoy-tex span">{{ user.userId }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">用户名：</label>
            <span class="majoy-tex span">{{ user.userName }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">部门：</label>
            <span class="majoy-text span">{{ user.deptName }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">联系电话：</label>
            <span class="majoy-text span">{{ user.mobilePhone }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-group">
            <label class="secondary-text label">联系邮箱：</label>
            <span class="majoy-text span">{{ user.email }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <div
      class="edu-page-title"
      style="margin-top: 32px;">
      申请明细及审批
    </div>
    <el-card
      shadow="never"
      body-style="padding: 24px;">
      <el-row
        v-if="rollInfo.content"
        :gutter="20"
        class="edu-info-list">
        <el-col>
          <div class="item-group">
            <label class="secondary-text label" >详细修改：</label>
            <div class="display-inline-block">
              <collegeTemplate
                v-if="rollInfo.wfType == 9"
                :content="rollInfo.content"/>
              <schoolTemplate
                v-if="rollInfo.wfType == 10"
                :content="rollInfo.content"/>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row
        v-if="rollInfo.content"
        :gutter="20"
        class="edu-info-list">
        <div class="item-group">
          <div class="display-inline-block">
            <cultureTemplate
              v-if="rollInfo.wfType == 11"
              :content="rollInfo.content"/>
            <teacherTemplate
              v-if="rollInfo.wfType == 12"
              :content="rollInfo.content"/>
            <culturePlanTemplate
              v-if="rollInfo.wfType == 18"
              :content="rollInfo.content"/>
          </div>
        </div>
        <div v-if="rollInfo.wfType==19" class="item-group" style="width:100%;margin-left:12px">
                    <div  class="display-inline-block" style="width:100%">
                        <classAdjustmentTemplate :content="rollInfo.content"></classAdjustmentTemplate>
                    </div>
                </div>
      </el-row>
      <el-row
        v-if="rollInfo.content && rollInfo.wfType!=19"
        :gutter="20"
        class="edu-info-list">
        <el-col>
          <div class="item-group">
            <label class="secondary-text label">审批材料：</label>
            <el-button
              v-for="(item, index) in rollInfo.content.evidenceList"
              :key="index"
              type="text"
              @click="handleGetFile(item)">{{ item.substr(10) }}</el-button>
          </div>
        </el-col>
        <el-col>
          <div class="item-group">
            <label class="secondary-text label">修改说明：</label>
            <span class="majoy-text span">{{ rollInfo.content.editRemark }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <div
      class="edu-page-title"
      style="margin-top: 32px;">
      审批进度
    </div>
    <el-card
      shadow="never"
      body-style="padding: 24px;">
      <el-table
        :data="rollInfo.listApproveHistory"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="序号"
          width="80"/>
        <el-table-column
          prop="time"
          label="时间"
          width="160">
          <template slot-scope="scope">
            {{ scope.row.time | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          prop="approvorName"
          label="审批人"
          width="120"/>
        <el-table-column
          prop="groupStr"
          label="角色"
          width="120"/>
        <el-table-column
          prop="result"
          label="审批结果"
          width="120">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.result == 'Process'"
              type="success">进行中</el-tag>
            <el-tag
              v-if="scope.row.result == 'End'"
              type="info">已结束</el-tag>
            <el-tag
              v-if="scope.row.result == 'Reject'"
              type="warning">已驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="审批说明"/>
        <el-table-column
          prop="fileInfo"
          label="审批材料">
          <template slot-scope="scope">
            <div v-if="scope.row.fileInfo">
              <el-button v-for="item in scope.row.fileInfo.approveAttachment" :key="item" type="text" @click="handleGetFile(item)">{{ item }}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <culturetemplate/>
  </div>
</template>
<script>
import { selectApproFlow } from 'common/src/api/approval'
import { findUserInfoByIdType, findLocalUserById } from 'common/src/api/user'
import { downloadfile } from 'common/src/api/upload'
import filters from 'common/src/filters'
import schoolTemplate from './rollTemplate/schoolTemplate'
import collegeTemplate from './rollTemplate/schoolTemplate'
import cultureTemplate from './rollTemplate/cultureTemplate'
import culturePlanTemplate from './rollTemplate/culturePlanTemplate'
import teacherTemplate from './rollTemplate/teacherTemplate'
import classAdjustmentTemplate from "./rollTemplate/classAdjustmentTemplate"
export default{
  name: 'StudentRollDetail',
  components: {
    schoolTemplate,
    collegeTemplate,
    cultureTemplate,
    teacherTemplate,
    culturePlanTemplate,
    classAdjustmentTemplate
  },
  filters: {
    formatDate(date) {
      return filters.formatDate(date, 'yyyy/MM/dd hh:mm:ss')
    }
  },
  data() {
    return {
      rollInfo: [],
      user: {},
      id: ''
    }
  },
  created() {
    const id = this.$route.query.id
    this.initPage(id)
  },
  methods: {
    _init_(user) {
      const query = 'userId=' + user.uid + '&type=' + user.type
      findUserInfoByIdType(query)
        .then(res => {
          if (res.code === 200 && res.data) {
            res.data.userType = user.type
            this.user = res.data
          }
        })
    },
    _initLocalUser(uid) {
      findLocalUserById('userId=' + uid)
        .then(res => {
          if (res.code === 200 && res.data) {
            this.user = res.data
            this.user.name = res.data.userName
          }
        })
    },
    initPage(id) {
      selectApproFlow(id)
        .then(res => {
          if (res && res.data) {
            const _user = {
              uid: res.data.applicantId,
              type: res.data.userType ? res.data.userType : '2'
            }

            if (res.data.userType === '3') {
              this._initLocalUser(_user.uid)
            } else {
              this._init_(_user)
            }

            res.data.content = JSON.parse(res.data.content)
            _.forEach(res.data.listApproveHistory, function(item) {
              item.fileInfo = JSON.parse(item.fileInfo)
            })
            this.rollInfo = res.data
          }
        })
    },
    handleGetFile(objectkey) {
      if (!objectkey) return
      downloadfile(objectkey)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
